import React from 'react';
import styles from './index.module.less';
import { NavLink } from 'react-router-dom';
import { navItems } from '@/config/router';
import { Divider } from 'antd';

const NavBar: React.FC = () => {
  return (
    <>
      <div className={styles.nav}>
        <Divider className={styles.divider}>
          <div className={styles.bar}>
            <div className={styles.links}>
              {navItems.map((item) => (
                <NavLink
                  key={item.path}
                  to={item.path}
                  className={({ isActive }) =>
                    `${styles.link} ${isActive ? styles.active : ''}`
                  }
                >
                  {item.label}
                </NavLink>
              ))}
            </div>
          </div>
        </Divider>
      </div>
    </>
  );
};

export default NavBar;
